<%--
  Created by IntelliJ IDEA.
  User: Yoyo-ba
  Date: 2021/10/31
  Time: 11:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Signin Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/login.css" rel="stylesheet">
    <script src="./js/commons.js"></script>
</head>

<body>

<div class="container">
    <!--
      action提交到 服务器的地址
      method 提交方式
    -->
    <form class="form-signin" action="/login&register/login" method="POST">
        <div class="text-center">
            <h2 class="form-signin-heading">登录页面</h2>
        </div>
        <label for="inputName" class="sr-only">用户名</label>
        <input type="text" id="inputName" name="username" class="form-control" placeholder="用户名" required autofocus>
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
        <label for="code" class="sr-only">验证码</label>
        <input type="text" name="code"  id="code" class="form-control" style="width: 150px;height:50px;float: left;" placeholder="请输入验证码">
        <!--  src写的是 关联生成验证码的 servlet -->
        <img id="img" style="width: 140px; height:50px;"  src="/login&register/checkcode"   class="form-control" onclick="fun1()">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me" name="remMe" id="remMe"> 记住账号密码
            </label>
            <%--添加一个span标签，用于显示登陆失败的提示信息--%>
            <span style="color: red">
                <%--这里是不是就是用于展示 动态信息的
                request.getAttribute("msg") 从域中取数据
                  但是 我们第一访问login.jsp的时候 这个数据是没有的
                  所以三元运算的方式
                    从域中取 msg 如果是null就不显示  如果不是null说明有错
                --%>
                <%--<%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>--%>
                ${msg}
            </span>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </form>

</div> <!-- /container -->
<script>
    //完成验证码 刷新
    function fun1(){
        //找到标签更改src
        var imgE = document.getElementById("img");
        //找到标签  src更新一下   因为浏览器有记忆功能就存在缓存，我们应该让每次的连接有不一样才不会走缓存！
        imgE.src="/login&register/checkcode?date="+new Date();
        // ?date="+new Date() 解决浏览器缓存问题

    }
</script>
</body>

<script type="text/javascript">
    // cookie现在在浏览器中
    // 怎么获取到浏览器中的cookie呢
    var cookie = {
        getCookie: function (key) {
            return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(key).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
        }
    };

    // 用户名和密码 在哪 在浏览器cookie中 上面的方法 就是可以通过 cookie名字找到cookie值
    var username = cookie.getCookie("username");
    var password = cookie.getCookie("password");
    //进行回显  回显到页面上
    //        <input type="text" id="inputName" name="username" class="form-control" placeholder="用户名" required autofocus>
    document.getElementById("inputName").value = username;
    //   document.getElementById("inputName").找到哪个标签 是一个输入标签
    //           .value  设置该标签的value属性  其实就是在表单中录入的信息
    //  value = username;  把cookie中的用户名 回显到了 录入框中 实现了记住用户名
    //        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
    document.getElementById("inputPassword").value=password;

</script>
</html>
